<template>
  <div class="progress" ref="progressRef">
    <div class="done" ref="doneRef"/>
  </div>
</template>

<script lang="ts">
import { ref, watchEffect, nextTick } from 'vue'
export default {
  name: 'Progressbar',
  props: {
    percentage: {
      type: Number,
      default: 0
    }
  },
  setup (props) {
    const progressRef = ref<HTMLElement | null>(null)
    const doneRef = ref<HTMLElement | null>(null)
    watchEffect(() => {
      const percent = props.percentage / 100
      nextTick(() => {
        const progressRefWidth = progressRef.value.clientWidth
        doneRef.value.style.height = progressRef.value.clientHeight + 'px'
        doneRef.value.style.width = percent * progressRefWidth + 'px'
      })
    })
    return {
      progressRef,
      doneRef
    }
  }
}
</script>

<style lang="scss" scoped>
.progress {
  height: 6px;
  border-radius: 3px;
  background-color: #ffffff;
  position: relative;

  .done {
    postion: absolute;
    top: 0;
    left: 0;
    border-radius: 2px;
    z-index: 2;
    background-color: #c1c2c2;
  }
}
</style>
